El elemento <h1> es un encabezado de nivel 1 en HTML y se utiliza para representar el título principal de una página o sección. A diferencia de <header> y <footer>, que pueden aparecer múltiples veces en un documento, el uso de <h1> debe ser más cuidadoso.
<h1> #Título Principal de la Página:
<h1> por página, que actúa como el título principal del documento. Esto ayuda a los motores de búsqueda y a los lectores de pantalla a identificar el contenido principal de la página.Títulos de Secciones:
<h2>, <h3>, etc., para los títulos de las secciones en lugar de múltiples <h1>. Esto mantiene una jerarquía clara de encabezados.Aquí tienes un ejemplo de cómo estructurar un documento HTML con un solo <h1> y múltiples secciones usando <h2>:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de Estructura HTML</title>
<style>
/* Add your CSS styles here */
</style>
</head>
<body>
<!-- Encabezado principal de la página -->
<header>
<h1>Encabezado Principal de la Página</h1>
<nav>
<ul>
<li><a href="#section1">Sección 1</a></li>
<li><a href="#section2">Sección 2</a></li>
<li><a href="#section3">Sección 3</a></li>
</ul>
</nav>
</header>
<main>
<!-- Sección 1 con su propio encabezado -->
<section id="section1">
<header>
<h2>Encabezado de la Sección 1</h2>
</header>
<p>Contenido de la sección 1.</p>
<footer>
<p>Pie de página de la sección 1.</p>
</footer>
</section>
<!-- Sección 2 con su propio encabezado -->
<section id="section2">
<header>
<h2>Encabezado de la Sección 2</h2>
</header>
<p>Contenido de la sección 2.</p>
<footer>
<p>Pie de página de la sección 2.</p>
</footer>
</section>
<!-- Sección 3 con su propio encabezado -->
<section id="section3">
<header>
<h2>Encabezado de la Sección 3</h2>
</header>
<p>Contenido de la sección 3.</p>
<footer>
<p>Pie de página de la sección 3.</p>
</footer>
</section>
</main>
<!-- Pie de página principal de la página -->
<footer>
<p>Pie de página principal</p>
</footer>
</body>
</html>Título Principal:
<h1> se utiliza una sola vez en el encabezado principal de la página para indicar el título principal del documento.Títulos de Secciones:
<section>) dentro del <main> tiene su propio encabezado utilizando <h2>. Esto mantiene una jerarquía clara de encabezados y ayuda a los motores de búsqueda y a los lectores de pantalla a entender la estructura del contenido.<h1>, <h2>, <h3>, etc.) mejora la accesibilidad del contenido para los usuarios que utilizan lectores de pantalla.En resumen, aunque es técnicamente posible tener múltiples <h1> en un documento HTML, es una práctica recomendada usar solo uno para el título principal de la página y utilizar <h2>, <h3>, etc., para los títulos de las secciones.